<template>
  <el-dialog :title="title" :model-value="open" width="900px" append-to-body :close-on-click-modal="false"
    @closed="onDialogClosed">
    <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格" prop="specifications">
            <template #label>
              <span class="required-star">*</span> 规格
            </template>
            <el-input v-model.trim="form.specifications" placeholder="请输入规格" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号" prop="types">
            <template #label>
              <span class="required-star">*</span> 型号
            </template>
            <el-input v-model.trim="form.types" placeholder="请输入型号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="曾用名">
            <el-input v-model="form.reName" placeholder="请输入曾用名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分类">
            <el-cascader v-model="form.classCode" ref="cascaderRef" :options="options"
              :props="{ checkStrictly: true,emitPath: false,children: 'children',value: 'classCode', label: 'className',}"
              :show-all-levels="false" @change="handleCascaderChange" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料号">
            <el-input v-model="form.classNum" :disabled="true" placeholder="自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源">
            <el-select v-model="form.resource" placeholder="请选择" style="width: 240px">
              <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类别">
            <el-select v-model="form.styles" placeholder="请选择" style="width: 240px">
              <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="等级">
            <el-select v-model="form.level" placeholder="请选择" style="width: 240px">
              <el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="颜色">
            <el-input v-model="form.colors" placeholder="请输入颜色" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数量">
            <el-input-number v-model="form.remaining" :min="0" :max="100000000" step-strictly>
              <template #suffix>
                <span>{{form.unit_V || ''}}</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位">
            <el-select v-model="form.unit" placeholder="请选择" style="width: 240px" @change="changeOpt5">
              <el-option v-for="item in options5" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="厂商">
            <el-input v-model="form.manufacturer" placeholder="请输入厂商" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="条码">
            <el-input v-model="form.barcode" placeholder="请输入条码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库">
            <el-select v-model="form.repository" placeholder="请选择" style="width: 240px">
              <el-option v-for="item in options6" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购时长">
            <el-input-number v-model="form.takeTime" :min="0" :max="100" step-strictly>
              <template #suffix>
                <span>小时</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安全阈值">
            <el-input-number v-model="form.warmLevel" :min="0" :max="100" step-strictly>
              <template #suffix>
                <span>{{form.unit_V || ''}}</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!-- 添加分隔线 -->
          <el-divider content-position="left">价格</el-divider>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本" prop="price.cost">
            <el-input-number v-model="displayCost" :step="costUnit_ === '元' ? 0.01 : 1"
              :step-strictly="costUnit_ === '分' ? true : false" :max="100000000" :precision="costUnit_ === '元' ? 2 : 0"
              @change="updateSellingPrice">
              <template #suffix>
                <el-dropdown @command="handleCommand" trigger="click">
                  <span>{{ costUnit_ }}
                    <el-icon size="10">
                      <ArrowDown />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="分">分</el-dropdown-item>
                      <el-dropdown-item command="元">元</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="税率" prop="price.taxRate">
            <el-input-number v-model="form.price.taxRate" :step="0.1" :precision="4" :max="100000000"
              @change="updateSellingPrice">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="利润率" prop="price.profitRate">
            <el-input-number v-model="form.price.profitRate" :step="0.1" :precision="4" :max="100000000"
              @change="updateSellingPrice">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="折扣率" prop="price.discount">
            <el-input-number v-model="form.price.discount" :step="0.1" :precision="4" :max="100000000"
              @change="updateSellingPrice">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠" prop="price.preferential">
            <el-input-number v-model="form.price.preferential" step-strictly :max="100000000"
              @change="updateSellingPrice">
              <template #suffix>
                <span>分</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="售价">
            <el-input-number v-model="form.price.price1Show" :disabled="true" :precision="3" :max="100000000">
              <template #suffix>
                <span>元</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script setup>
  // 获取props
  const props = defineProps({
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      required: true
    },
    options: {
      type: Array,
      default: () => []
    },
    options2: {
      type: Array,
      default: () => []
    },
    options3: {
      type: Array,
      default: () => []
    },
    options4: {
      type: Array,
      default: () => []
    },
    options5: {
      type: Array,
      default: () => []
    },
    options6: {
      type: Array,
      default: () => []
    }
  });
  
  // 获取emit函数
  const emit = defineEmits([
    'submitForm', 
    'cancel', 
    'handleCascaderChange', 
    'changeOpt5', 
    'updateSellingPrice', 
    'update:form',
    'update:options',
    'update:options2',
    'update:options3',
    'update:options4',
    'update:options5',
    'update:options6'
  ]);
  
  const roleRef = ref(null);
  const cascaderRef = ref(null);
  const costUnit_ = ref('元');//成本显示单位 默认分

// 新增计算属性
const displayCost = computed({
  get() {
    if (costUnit_.value === '元') {
      // 为了避免浮点数精度问题，将分转换为元时先除以 100 再取整
      return Math.round(props.form.price.cost) / 100;
    }
    return props.form.price.cost;
  },
  set(newValue) {
    if (costUnit_.value === '元') {
      // 为了避免浮点数精度问题，将元转换为分时先乘以 100 再取整
      props.form.price.cost = Math.round(newValue * 100);
    } else {
      props.form.price.cost = newValue;
    }
    updateSellingPrice();
  }
});

// 添加 handleCommand 函数
const handleCommand = (e) => {
    costUnit_.value = e;
    // 不需要再修改 form.value.price.cost 的原始值
    // 触发售价更新
    updateSellingPrice();
};


  const handleCascaderChange = (value) => {
    // emit('handleCascaderChange', value);
    cascaderRef.value.togglePopperVisible(false)

  };
  
  const changeOpt5 = (value) => {
    emit('changeOpt5', value);
  };
  
  const updateSellingPrice = () => {
    emit('updateSellingPrice');
  };
  
  const submitForm = () => {
    roleRef.value.validate((valid) => {
      if (valid) {
        emit('submitForm');
      } else {
        return false;
      }
    });
  };
  
  const cancel = () => {
    emit('cancel');
  };
  
  const onDialogClosed = () => {
    roleRef.value?.clearValidate();
  };
  </script>
  
  <style lang="scss" scoped>
  .el-input-number {
    width: 190px;
  }
  .required-star {
    color: #F56C6C;
    margin-right: 4px;
  }
  </style>